<template>
    <div class="container">
        <div id="topdiv1">
            <span id="classinfo">课程中心</span>
        </div>
        <div class="nav"><ul>
            <li>
              <a href="#">我的课程</a>
            </li>
            <li>
              <a href="#">我要选课</a>
            </li>
            <li>
              <a href="#">我的笔记</a>
            </li>
            <li>
              <a href="#">我的提问</a>
            </li>
            </ul>
        </div>
        <div id="topdiv2">
            <span style="float:left;margin-top: 5px;">欢迎你,嵩天</span>
            <img :src="require('@/assets/head.png')" alt="图片找不到啦">
            <img :src="require('@/assets/msg.png')" style="width:10%;height:10%" alt="图片找不到啦">
        </div>
    </div>
  </template>
  
  <script>

  export default {

  }
  </script>
  <style scoped>
img{
    float: left;
    vertical-align:center;
}
.container{
  height: 40px;
  /* background-color: purple; */
}
#topdiv1{
    float: left;
    text-align: left;
    margin-top: 5px;
    margin-left: 50px
}
#topdiv2{
    width:fit-content;
    height:fit-content;
    line-height:fit-content;
    float:right;
}
.nav{
    float: left;
    margin-left:500px;
  }
  .nav ul li{
    float: left;
    list-style: none;
    margin-top:-10px;
  }
  .nav ul li a{
    padding: 0 20px;
    display: block;
    height:20px;
    text-decoration: none;
  }
  .nav ul li a:hover{
    color:blue;
    text-decoration:dashed;
  }
#classinfo{

    font-size:18px;
    font-weight:bold;
}
  </style>
  